﻿<!DOCTYPE html>
<html>

<head>
    <title>哈尔滨之行</title>
    <meta charset="utf-8" />
    <!-- 引入leafletapi -->
    <link rel="stylesheet" href="http://gisarmory.xyz/blog/lib/leaflet/leaflet.css" />
    <script src="http://gisarmory.xyz/blog/lib/leaflet/leaflet.js"></script>

    <script src="src/AnimatedMarker.js"></script>

    <style>
        body {
            margin: 0;
        }

        .map {
            position: absolute;
            height: 100%;
            right: 0;
            left: 0;
        }

        .menuBar {
            position: relative;
            text-align: center;
            top: 10px;
            margin: 0 50px;
            padding: 5px;
            border-radius: 3px;
            z-index: 999;
            color: #ffffff;
            background-color: rgba(0, 168, 0, 0.1);
        }
    </style>
</head>

<body>
    <div class="map" id="map"></div>
    <div class="menuBar">
        <!--<input type="button" value="开始" onclick="startClick()" />
        <input type="button" value="暂停" onclick="pauseClick()" />
        <input type="button" value="加速" onclick="speetUp()" />
        <input type="button" value="减速" onclick="speetDown()" />
        <input type="button" value="停止" onclick="stopClick()" />-->
        <div style="color: #00ff51; font-size: 61px;">哈尔滨之行</div>
    </div>
</body>

<script>
    // 初始化地图
    var map = L.map('map', {
        center: [39.91454216376519, 116.41885757446289],
        zoom: 13,
        preferCanvas: true // 使用canvas模式渲染矢量图形
    });
    // 添加底图
    //var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
    var tiles = L.tileLayer('https://g1.shipxy.com/tile.g?m=1&x={x}&y={y}&z={z}').addTo(map);
    //var tiles = L.tileLayer('https://g1-8.shipxy.com/{z}/{y}/{x}.png').addTo(map);

        
    var alllatlngs = [
        [
            [39.861358, 116.355953],
            [39.862631, 116.366033],
            [39.865029, 116.378963],
            [39.867435, 116.399369],
            [39.865250, 116.411026],
            [39.865584, 116.423087],
            [39.865864, 116.440244],
            [39.866135, 116.458103],
            [39.875294, 116.477282],
            [39.885275, 116.477307],
            [39.893210, 116.478879],
            [39.908287, 116.475783],
            [39.923556, 116.478115],
            [39.933492, 116.478291],
            [39.946000, 116.474947],
            [39.958375, 116.485919]
        ],
        //413
        [
            [39.958375, 116.485919],
            [39.958492, 116.488719],
            [39.961906, 116.493992],
            [39.958641, 116.498741],
            [39.955148, 116.499983],
            [39.948876, 116.500877],
            [39.945043, 116.510725]
        ],
        //G953
        [
            [39.945043, 116.510725],
            [40.41709, 117.50073],
            [40.97620, 117.93915],
            [41.12646, 119.63732],
            [41.57373, 120.45037],
            [42.06517, 121.75790],
            [41.81920, 123.43619],
            [43.50453, 124.82266],
            [43.87671, 125.20093],
            [44.54557, 125.67617],
            [45.70732, 126.57696]
        ]
    ];
    var speedList = [];

    for (var i = 0; i < alllatlngs.length; i++) {
        var ss = 6;
        if (i == 1) {
            ss = 3;
        } else if (i == 2) {
            ss = 100000000000000;
        }
        for (var j = 0; j < alllatlngs[i].length; j++) {
            speedList.push(ss);
        }
    }


    let speetX = 1 // 默认速度倍数
    var zooms = [14, 14, 6];
    var distances = [100, 10, 2000];
    var imgs = ['image/car.png', 'image/bus.png', 'image/train.png'];

    var currentZoom = zooms[0];
    setTimeout(function () {
        onceAnimate(0, alllatlngs[0], distances[0],14,imgs[0])
    }, 3000);
    function onceAnimate(i, latlngs, distance=100, zoom = 14, image) {

        // 轨迹线
        var routeLine = L.polyline(latlngs, {
            weight: 8
        }).addTo(map);
        // 实时轨迹线
        var realRouteLine = L.polyline([], {
            weight: 8,
            color: '#FF9900'
        }).addTo(map);

        var carIcon = L.icon({
            iconSize: [37, 26],
            iconAnchor: [19, 13],
            iconUrl: image
        })
        // 动态marker
        var animatedMarker = L.animatedMarker(routeLine.getLatLngs(), {
            speedList: speedList,
            distance: distance,
            interval: 200, // 默认为100mm
            icon: carIcon,
            playCall: updateRealLine,
            onEnd: function () {
                // TODO: blow up this marker
                if (i < alllatlngs.length) {
                    animatedMarker.removeIcon();
                    currentZoom = zooms[i];
                    onceAnimate(++i, alllatlngs[i], distances[i], zooms[i], imgs[i]);
                }
            }
        }).addTo(map)
        var newLatlngs = [routeLine.getLatLngs()[0]]

        // 绘制已行走轨迹线（橙色那条）
        function updateRealLine(latlng) {
            newLatlngs.push(latlng);
            realRouteLine.setLatLngs(newLatlngs);
            //map.flyTo(latlng, 14);
            map.setView(latlng, zoom);
            //map.flyToBounds();
        }

        animatedMarker.start();

        // 加速
        function speetUp() {
            speetX = speetX * 2
            animatedMarker.setSpeetX(speetX);
        }

        // 减速
        function speetDown() {
            speetX = speetX / 2
            animatedMarker.setSpeetX(speetX);
        }

        // 开始
        function startClick() {
            animatedMarker.start();
        }

        // 暂停
        function pauseClick() {
            animatedMarker.pause();
        }

        // 停止
        function stopClick() {
            newLatlngs = []
            animatedMarker.stop();
        }
    }



</script>

</html>